<template>
    <div>
        <div class="user_info" @click="$navigate.to('/pages/relationship/detail?id=' + item.userId)" >
            <div class="avator">
                <image :src="detail.headImg" mode="" />
            </div>
            <div class="info">
                <div class="name" v-if="detail.userId">
                    <p>{{detail.userName}}</p>
                    <div v-if="isMine" class="enter_info">
                        {{ isFullImprove ? '展示中' : '完善信息' }}
                    </div>
                    <template v-else>
                        <div v-if="detail.addStatus == '00'" class="add_friend add_friend_wait">待验证</div>
                        <div v-if="!detail.addStatus && !detail.addtionStatus" @click.stop="addFriend" class="add_friend">添加</div>
                        <template v-if="detail.addtionStatus == '00'">
                            <div v-if="detail.userId == detail.fromUserId" @click.stop="confirmAddFriend('open')" class="add_friend to_add_friend">验证</div>
                            <div v-if="detail.userId == detail.toUserId" class="add_friend add_friend_wait">待验证</div>
                        </template>
                        <div v-if="detail.addtionStatus == '01' || detail.addtionStatus == '02'" @click.stop="deleteItem" class="add_friend add_friend_delete">删除</div>
                    </template>
                </div>
                <div class="sub_info flex-v-center">
                    <p class="flex-v-center flex-1">
                        <i class="icon-location">{{ detail.province || detail.city ? (detail.province || '') + ' ' + (detail.city || '') : '未知'}}</i>
                    </p>
                    <p class="flex-v-center flex-1">
                        <i class="icon-user1">{{detail.userTypeNames || '自由职业'}}</i>
                    </p>
                </div>
                <div v-if="myFriend" class="tabs flex-v-center">
                    <div class="flex-1 flex-v-center pad-r20">
                        <span v-for="(i, idx) in detail.userIndustryNames" :key="idx">{{i.industryName}}</span>
                    </div>
                    <div class="flex-v-center fs28" v-if="detail.addtionStatus == '01' || detail.addtionStatus == '02'">
                        <p @click.stop="addWechat"> <i class="icon-weixin1 mar-r5"></i> 微信</p>
                        <p @click.stop="callPhone"> <i class="icon-phone fs26 mar-r5"></i> 电话</p>
                    </div>
                </div>
                <div v-else class="tabs flex-v-center">
                    <span v-for="(i, idx) in detail.userIndustryNames" :key="idx">{{i.industryName}}</span>
                </div>
            </div>
        </div>
        <uni-popup ref="addCheck" type="center">
            <div class="add_check">
                <div class="title">
                    <i></i>
                    <p>好友添加验证</p>
                    <i class="icon-close"></i>
                </div>
                <div class="content">{{detail.userName + '请求添加好友，是否通过验证？'}}</div>
                <div class="btns">
                    <div class="btn" @click.stop="confirmAddFriend('refuse')">拒绝添加</div>
                    <div class="btn" @click.stop="confirmAddFriend('confirm')">同意添加</div>
                </div>
            </div>
        </uni-popup>

        <uni-popup ref="adWxPopup" type="center">
            <div class="ad_wx_box">
                <div class="title">扫码添加微信</div>
                <div class="img pad-tb20 flex-center">
                    <image class="w300 h300" :src="detail.wxacodeUrl" mode="" />
                </div>
                <div class="tip flex-center">长按识别二维码添加</div>
                <!-- <div class="title">复制微信号</div>
                <div class="wx_num">微信号：{{detail.wxnum}}</div>
                <div class="tip">温馨提示：添加好友太多容易被微信封号哦，请酌情添加微信好友</div>
                <div @click="copyWxnum" class="copy_btn red_btn">复制微信号，去微信添加好友</div> -->
            </div>
        </uni-popup>  
    </div>
</template>

<script>
import { userAddtionUser, passUserAddtion } from '@/request/relationship'
export default {
    props: {
        item: {
            type: Object,
            default: () => ({})
        },
        myFriend: {
            type: Boolean,
            default: false
        },
        isMine: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        setTimeout(() => {
            if(this.isMine && !this.isFullImprove) {
                this.$interact.modal({
                    title: '提示',
                    content: '去完善个人信息，方便潜在客户找到你',
                    showCancel: true
                }).then(action => {
                    if(action.confirm) {
                        this.$navigate.to('/pages/relationship/detail?id=' + this.item.userId)
                    }
                })
            }
        })
    },
    computed: {
        detail() {
            let detail = this.item
            try{
                detail.userIndustryNames = JSON.parse(detail.userIndustryNames) || []
            } catch(err) {
                detail.userIndustryNames = []
            }
            try{
                detail.userTypeNames = JSON.parse(detail.userTypeNames) || []
            } catch(err) {
                detail.userTypeNames = []
            }
            detail.userTypeNames = detail.userTypeNames.map(i => i.typeName)
            detail.userTypeNames = detail.userTypeNames.join('、')
            return detail
        },
        isFullImprove() {
            let status = 
                this.detail.userName && this.detail.city &&
                this.detail.userTypeNames && this.detail.userIndustryNames &&
                this.detail.userPhone && this.detail.wxacodeUrl
            return status
        },
    },
    methods: {
        addFriend() {
            if(this.detail.addStatus == '00') return ;
            userAddtionUser({
                toUserId: this.detail.userId,
            }, {
                filterErrCode: 911
            }).then(res => {
                this.item.addStatus = '00'
                this.$interact.toast('添加好友申请已发送')  
            }, err => {
                if(err.code == 911) {
                    this.$interact.modal({
                        title: '添加人数已达上限',
                        content: '您的申请添加次数已达上限，成为VIP获取更多次数',
                        showCancel: true,
                        confirmText: '开通会员'
                    }).then(action => {
                        if(action.confirm) {
                            this.$navigate.toVip()
                        }
                    })
                }
            })
        },
        async confirmAddFriend(type) {
            if(type == 'open') {
                this.$refs.addCheck.open()
            } else if(type == 'cancel') {
                this.$refs.addCheck.close()
            } else if(type == 'confirm') {
                await passUserAddtion({
                    additonId: this.detail.addtionId,
                    status: '01'//00删除，01通过，02拒绝
                })
                this.confirmAddFriend('cancel')
                this.$emit('refresh', '01')
            } else if(type == 'refuse') {
                await passUserAddtion({
                    additonId: this.detail.addtionId,
                    status: '02'//00删除，01通过，02拒绝
                })
                this.$emit('refresh', '02')
                this.confirmAddFriend('cancel')
            }
        },
        deleteItem() {
            this.$interact.modal({
                title: '提示',
                content: '是否删除好友？',
                showCancel: true,
            }).then(action => {
                if(action.confirm) {
                    passUserAddtion({
                        additonId: this.detail.addtionId,
                        status: '00'//00删除，01通过，02拒绝
                    }).then(res => {
                        this.$emit('refresh', '00')
                    })
                }
            })
        },
        addWechat() {
            if(!this.detail.wxacodeUrl) return this.$interact.toast('暂未设置微信号')
            this.$refs.adWxPopup.open()
        },
        copyWxnum() {
            uni.setClipboardData({
                data: this.detail.wxnum,
                success: () => {
                    this.$interact.toast('复制成功')
                    this.$refs.adWxPopup.close()
                }
            })
        },
        callPhone() {
            if(!this.detail.userPhone) return this.$interact.toast('暂未设置手机号')
            uni.makePhoneCall({
                phoneNumber: this.detail.userPhone
            })
        },
    }

}
</script>

<style lang="less" scoped>
.user_info{
    display: flex;
    .avator{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        overflow: hidden;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .info{
        flex: 1;
        width: 1px;
        .name{
            height: 60rpx;
            margin-bottom: 10rpx;
            .align(v-center);
            justify-content: space-between;
            p{
                flex: 1;
                margin-right: 20rpx;
                font-weight: bold;
                font-size: 36rpx;
                .overflow();
            }
            .enter_info{
                font-size: 24rpx;
                color: #fff;
                width: 130rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background: #f76035;
                .align(center);
            }
            .add_friend{
                .align(center);
                width: 130rpx;
                height: 60rpx;
                border-radius: 30rpx;
                border: 1px solid #f76035;
                color: #f76035;
                &.add_friend_wait{
                    border: 0;
                    color: #999
                }
                &.to_add_friend{
                    border: 1px solid #0b9016;
                    color: #0b9016;
                }
                &.add_friend_delete{
                    border: 0;
                    color: red;
                }
            }
        }
        .sub_info{
            margin-bottom: 20rpx;
            font-size: 32rpx;
            height: 60rpx;
            color: #444;
            width: 100%;
            >p{
                flex: 1;
                width: 1px;
                i{
                    width: 100%;
                    font-size: 30rpx;
                    display: block;
                    .overflow();
                    &::before{
                        margin-right: 5rpx;
                    }
                }
            }
        }
        .tabs{
            overflow-x: auto;
            width: 100%;
            span{
                display: block;
                flex-shrink: 0;
                height: 56rpx;
                padding: 0 15rpx;
                line-height: 56rpx;
                font-size: 28rpx;
                background: #f1f1f1;
                color: #666666;
                margin-right: 20rpx;
            }
            >div{
                flex-shrink: 0;
                overflow: hidden;
                p{
                    width: 160rpx;
                    height: 50rpx;
                    padding: 0 20rpx;
                    border-radius: 40rpx;
                    border: 1px solid #f1f1f1;
                    margin-right: 10rpx;
                    .align(center);
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
    }
}

.add_check{
    width: 600rpx;
    height: 350rpx;
    background: #fff;
    border-radius: 15rpx;
    .title{
        flex-shrink: 0;
        width: 100%;
        height: 90rpx;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        i{
            color: #999;
            width: 80rpx;
        }
        p{
            font-weight: bold;
            flex: 1;
            text-align: center;
        }
    }
    .content{
        padding: 0 50rpx;
        margin-top: 30rpx;
    }
    .btns{
        display: flex;
        justify-content: center;
        margin-top: 50rpx;
        .btn{
            width: 240rpx;
            height: 80rpx;
            border-radius: 10rpx;
            .align(center);
            color: #fff;
            background: #3c69e5;
            &:first-child{
                margin-right: 40rpx;
                background: @mainColor;
            }

        }
    }
}


.ad_wx_box {
    width: 600rpx;
    padding: 30rpx;
    border-radius: 15rpx;
    background: #fff;
    color: #333;
    .title{
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20rpx;
    }
    .wx_num{            
        margin-bottom: 30rpx;
        font-size: 36rpx;
        font-weight: bold;
    }
    .tip{
        font-size: 32rpx;
        color: #999;
        margin-bottom: 40rpx;
        line-height: 1.6;
        font-size: 28rpx;
    }


}
</style>